<template>
  <x-dialog v-model="show" class="dialog-view">
    <icon type="cancel" class="icon-cancel" @click.native="close" v-bind:style="closeStyle"></icon>
    <slot :style="style"></slot>
  </x-dialog>
</template>
<script>
  import {XDialog, Icon} from 'vux';

  export default {
    name: "dialog-view",
    model: {
      prop: 'show',
      style: null,
      event: 'close'
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      closeStyle: {}
    },
    components: {
      XDialog, Icon
    },
    methods: {
      close: function () {
        this.$emit('close');
      }
    }
  }
</script>
<style scoped>
  .dialog-view {
    background-color: transparent;
  }

  .dialog-view .icon-cancel {
    position: absolute;
    top: 0.2rem;
    right: -0.2rem;
    color: #ffffff;
    z-index: 1;
  }
</style>
